import React from "react"
import styles from './SearchResult.module.scss'
import { useHistory} from "react-router-dom"
import useStore from "../../context/store"
import {useObserver} from "mobx-react-lite"
const SearchResult: React.FC = () => {
    let { search } = useStore()
    let history = useHistory()
    function goBack() {
        history.goBack()
    }
    function pushDetail(e:React.MouseEvent<HTMLElement>){
        if(e.target!==e.currentTarget){
            console.log()
            history.push({
                pathname:"/index/searchDetail",
                state:{
                    url:(e.target as HTMLElement).dataset.index
                }
            })
        }
    }
    function Detail(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
        if (e.target !== e.currentTarget) {
            let obj = (e.target as HTMLElement).dataset.items
            history.push({
                pathname: '/detail',
                state: JSON.parse(obj as string)
            })
        }
    }
    return useObserver(()=><div className={styles.wrap}>
        <header >
            <div onClick={goBack}>
                {'<'}
            </div>
            <div className={styles.text}>
                搜索结果
            </div>
        </header>
        <h2>排名</h2>
        <div className={styles.items} onClick={Detail}>
            {
                search.list.map((item) => {
                    return <div key={item.id} data-items={JSON.stringify(item)} >
                        <img src={item.image} alt="" data-items={JSON.stringify(item)}/>
                        <p data-items={JSON.stringify(item)}>{item.name}</p>
                    </div>
                })
            }
        </div>
        <h2>内容</h2>
        <section className={styles.frame} onClick={pushDetail}>
            {
                search.articleList.map((item,index)=>{
                    return <div key={index} data-index={item.url}>
                        <img src={item.image} alt="" data-index={item.url}/>
                        <p data-index={item.url}>{item.title}</p>
                        <p data-index={item.url}>推荐值:{item.score}</p> 
                    </div>
                })
            }
       
            {/* <iframe src={(search.articleList[0] as {url:string}).url}></iframe> */}
        </section>
    </div>)
}
export default SearchResult 